<template>
	<div class="dashboard-container flex flex-column">
		<div class="dashboard-header flex align-center">
			<img src="@/static/桂林人民LOGO.png" class="logo">
			<div class="title-box flex-auto" @click="jump" style="cursor: pointer">
				<div class="title">科室医生绩效管理</div>
				<div class="hospital-name">桂林市人民医院</div>
			</div>
			<div class="right-box flex align-center">
				<div class="time-box">
					<div class="current-time-label">当前时间</div>
					<div class="current-time-value">{{currentTime}}</div>
				</div>
				<div>
					<img src="@/static/角色图标.png" class="avatar">
					<div class="user-name">院长视角</div>
				</div>
			</div>
		</div>

		<!-- 主内容区域 -->
		<main class="dashboard-main">
			<!-- 第一行卡片 -->
			<div class="card-row">
				<!-- 各科室综合排名 -->
				<div class="dashboard-card">
					<div class="card-header">
						<h2>各科室综合排名</h2>
						<div class="card-filter" @click="changeTimeType">
							<div class="filter-icon"></div>
							<span>{{timeType == 'Month'?'本月数据':'本日数据'}}</span>
						</div>
					</div>
					<div class="card-body">
						<ul class="ranking-list">
							<li v-for="(item, index) in departmentRankings" :key="index" class="ranking-item"
								:class="{'ranking-item-actvive':currentDept === index}" @click="changeDept(item,index)">
								<div class="rank-number" :style="{ backgroundColor: getRankColor(index) }">
									{{ index + 1 }}
								</div>
								<div class="rank-info">
									<div class="dept-name">
										{{ item.displayDeptName}}
										<span class="doctor-count">(医师: {{ item.displayDRPersonInfoCount }}人)</span>
									</div>
									<div class="dept-score"
										:class="[{'dept-score-green':item.displayDeptScoreCount>=90},{'dept-score-red':item.displayDeptScoreCount<60}]">
										{{ item.displayDeptScoreCount }}
									</div>
								</div>
							</li>
						</ul>
					</div>
				</div>

				<!-- 医疗质量 -->
				<div class="dashboard-card">
					<div class="card-header">
						<img src="@/static/医疗质量1.png" />
						<h2>医疗质量</h2>
						<div class="right-score">
							<span>{{medicalQuality.displayScoreCount?medicalQuality.displayScoreCount:0}}</span>分
						</div>
					</div>
					<div class="card-body">
						<div class="quality-metrics">
							<div class="metric-item">
								<div class="item-between">
									<div class="metric-name">诊断符合率</div>
									<div class="metric-value">
										{{medicalQuality.displayDiagnoseInfoRatio?medicalQuality.displayDiagnoseInfoRatio:0}}%
									</div>
								</div>
								<div class="metric-trend">
									<div class="up-icon-green"
										:class="{'up-icon-red':getUpDownData(medicalQuality.displayDiagnoseInfoProp) == '↓'}">
										{{getUpDownData(medicalQuality.displayDiagnoseInfoProp)}}
									</div>环比
									{{medicalQuality.displayDiagnoseInfoProp?medicalQuality.displayDiagnoseInfoProp:0}}%
								</div>
							</div>
							<div class="metric-item">
								<div class="item-between">
									<div class="metric-name">手术并发症率</div>
									<div class="metric-value">
										{{medicalQuality.displayRelapseInfoRatio?medicalQuality.displayRelapseInfoRatio:0}}%
									</div>
								</div>
								<div class="metric-trend">
									<div class="up-icon-green"
										:class="{'up-icon-red':getUpDownData(medicalQuality.displayRelapseInfoProp) == '↓'}">
										{{getUpDownData(medicalQuality.displayRelapseInfoProp)}}
									</div>环比
									{{medicalQuality.displayRelapseInfoProp?medicalQuality.displayRelapseInfoProp:0}}%
								</div>
							</div>
							<div class="metric-item">
								<div class="item-between">
									<div class="metric-name">病历合格率</div>
									<div class="metric-value">{{medicalQuality.displayMRInfoRatio?medicalQuality.displayMRInfoRatio:0}}%
									</div>
								</div>
								<div class="metric-trend">
									<div class="up-icon-green"
										:class="{'up-icon-red':getUpDownData(medicalQuality.displayMRInfoProp) == '↓'}">
										{{getUpDownData(medicalQuality.displayMRInfoProp)}}
									</div>环比
									{{medicalQuality.displayMRInfoProp?medicalQuality.displayMRInfoProp:0}}%
								</div>
							</div>
							<div class="metric-item">
								<div class="item-between">
									<div class="metric-name">低风险死亡率</div>
									<div class="metric-value">{{medicalQuality.displayLowInfoRatio?medicalQuality.displayLowInfoRatio:0}}%
									</div>
								</div>
								<div class="metric-trend">
									<div class="up-icon-green"
										:class="{'up-icon-red':getUpDownData(medicalQuality.displayLowInfoProp) == '↓'}">
										{{getUpDownData(medicalQuality.displayLowInfoProp)}}
									</div>环比
									{{medicalQuality.displayLowInfoProp?medicalQuality.displayLowInfoProp:0}}%
								</div>
							</div>
						</div>
						<div class="chart-container">
							<ECharts :options="qualityChartOption" class="echart-chart"></ECharts>
						</div>
					</div>
				</div>

				<!-- 工作效率 -->
				<div class="dashboard-card">
					<div class="card-header">
						<img src="@/static/工作效率.png" />
						<h2>工作效率</h2>
						<div class="right-score">
							<span>{{workEfficiency.displayScoreCount?workEfficiency.displayScoreCount:0}}</span>分
						</div>
					</div>
					<div class="card-body">
						<div class="efficiency-metrics">
							<div class="metric-item">
								<div class="item-between">
									<div class="metric-name">门诊量</div>
									<div class="metric-value">{{workEfficiency.outpatientCount?workEfficiency.outpatientCount:0}}</div>
								</div>
								<div class="metric-trend">
									<div class="up-icon-green"
										:class="{'up-icon-red':getUpDownData(workEfficiency.outpatientCountProp) == '↓'}">
										{{getUpDownData(workEfficiency.outpatientCountProp)}}
									</div>环比
									{{workEfficiency.outpatientCountProp?workEfficiency.outpatientCountProp:0}}%
								</div>
							</div>
							<div class="metric-item">
								<div class="item-between">
									<div class="metric-name">住院量</div>
									<div class="metric-value">{{workEfficiency.ipdCount?workEfficiency.ipdCount:0}}</div>
								</div>
								<div class="metric-trend">
									<div class="up-icon-green" :class="{'up-icon-red':getUpDownData(workEfficiency.ipdCountProp) == '↓'}">
										{{getUpDownData(workEfficiency.ipdCountProp)}}
									</div>环比
									{{workEfficiency.ipdCountProp?workEfficiency.ipdCountProp:0}}%
								</div>
							</div>
							<div class="metric-item">
								<div class="item-between">
									<div class="metric-name">手术台数</div>
									<div class="metric-value">{{workEfficiency.surgeryCount?workEfficiency.surgeryCount:0}}</div>
								</div>
								<div class="metric-trend">
									<div class="up-icon-green"
										:class="{'up-icon-red':getUpDownData(workEfficiency.surgeryCountProp) == '↓'}">
										{{getUpDownData(workEfficiency.surgeryCountProp)}}
									</div>环比
									{{workEfficiency.surgeryCountProp?workEfficiency.surgeryCountProp:0}}%
								</div>
							</div>
							<div class="metric-item">
								<div class="item-between">
									<div class="metric-name">平均住院日</div>
									<div class="metric-value">{{workEfficiency.avgPatientDay?workEfficiency.avgPatientDay:0}}天</div>
								</div>
								<div class="metric-trend">
									<div class="up-icon-green"
										:class="{'up-icon-red':getUpDownData(workEfficiency.avgPatientDayProp) == '↓'}">
										{{getUpDownData(workEfficiency.avgPatientDayProp)}}
									</div>环比
									{{workEfficiency.avgPatientDayProp?workEfficiency.avgPatientDayProp:0}}天
								</div>
							</div>
						</div>
						<div class="chart-container">
							<ECharts :options="efficiencyChartOption" class="echart-chart"></ECharts>
						</div>
					</div>
				</div>

				<!-- 技术难度 -->
				<div class="dashboard-card">
					<div class="card-header">
						<img src="@/static/技术难度.png" />
						<h2>技术难度</h2>
						<div class="right-score">
							<span>{{technicalDifficult.displayScoreCount?technicalDifficult.displayScoreCount:0}}</span>分
						</div>
					</div>
					<div class="card-body">
						<div class="difficulty-metrics">
							<div class="metric-item">
								<div class="item-between">
									<div class="metric-name">CMI值</div>
									<div class="metric-value">{{technicalDifficult.displayCMIRatio?technicalDifficult.displayCMIRatio:0}}
									</div>
								</div>
								<div class="metric-trend">
									<div class="up-icon-green"
										:class="{'up-icon-red':getUpDownData(technicalDifficult.displayCMIProp) == '↓'}">
										{{getUpDownData(technicalDifficult.displayCMIProp)}}
									</div>环比
									{{technicalDifficult.displayCMIProp?technicalDifficult.displayCMIProp:0}}
								</div>
							</div>
							<div class="metric-item">
								<div class="item-between">
									<div class="metric-name">微创手术占比</div>
									<div class="metric-value">
										{{technicalDifficult.displayMISDSURatio?technicalDifficult.displayMISDSURatio:0}}%
									</div>
								</div>
								<div class="metric-trend">
									<div class="up-icon-green"
										:class="{'up-icon-red':getUpDownData(technicalDifficult.displayCMIProp) == '↓'}">
										{{getUpDownData(technicalDifficult.displayMISDSUProp)}}
									</div>环比
									{{technicalDifficult.displayMISDSUProp?technicalDifficult.displayMISDSUProp:0}}%
								</div>
							</div>
							<div class="metric-item">
								<div class="item-between">
									<div class="metric-name">三级手术占比</div>
									<div class="metric-value">
										{{technicalDifficult.displayPDUL3SRatio?technicalDifficult.displayPDUL3SRatio:0}}%
									</div>
								</div>
								<div class="metric-trend">
									<div class="up-icon-green"
										:class="{'up-icon-red':getUpDownData(technicalDifficult.displayPDUL3SProp) == '↓'}">
										{{getUpDownData(technicalDifficult.displayPDUL3SProp)}}
									</div>环比
									{{technicalDifficult.displayPDUL3SProp?technicalDifficult.displayPDUL3SProp:0}}%
								</div>
							</div>
							<div class="metric-item">
								<div class="item-between">
									<div class="metric-name">四级手术占比</div>
									<div class="metric-value">
										{{technicalDifficult.displayPDUL4SRatio?technicalDifficult.displayPDUL4SRatio:0}}%
									</div>
								</div>
								<div class="metric-trend">
									<div class="up-icon-green"
										:class="{'up-icon-red':getUpDownData(technicalDifficult.displayPDUL4SProp) == '↓'}">
										{{getUpDownData(technicalDifficult.displayPDUL4SProp)}}
									</div>环比
									{{technicalDifficult.displayPDUL4SProp?technicalDifficult.displayPDUL4SProp:0}}%
								</div>
							</div>
						</div>
						<div class="chart-container">
							<ECharts :options="difficultyChartOption" class="echart-chart"></ECharts>
						</div>
					</div>
				</div>
			</div>

			<!-- 第二行卡片 -->
			<div class="card-row">
				<!-- 科室医生绩效明细 -->
				<div class="dashboard-card">
					<div class="card-header">
						<h2>科室医生绩效明细</h2>
						<div class="card-filter">
							<span>{{departmentRankings.length>0?departmentRankings[currentDept].name:''}}</span>
						</div>
					</div>
					<div class="card-body">
						<ul class="ranking-list">
							<li v-for="(item, index) in doctorPerformances" :key="index" class="ranking-item"
								:class="{'ranking-item-actvive':currentDoctor === index}" @click="changeDoctor(item,index)">
								<div class="rank-number" :style="{ backgroundColor: getRankColor(index) }">
									{{ item.displayDRPersonName?item.displayDRPersonName.slice(0,1):index+1 }}
								</div>
								<div class="rank-info">
									<div class="dept-name">
										{{ item.displayDRPersonName }}
										<span class="doctor-count">{{ item.displayDRPersonTitleName }}</span>
									</div>
									<div class="dept-score"
										:class="[{'dept-score-green':item.displayDRPersonCount>=90},{'dept-score-red':item.displayDRPersonCount<60}]">
										{{ item.displayDRPersonCount }}
									</div>
								</div>
							</li>
						</ul>
					</div>
				</div>

				<!-- 成本控制 -->
				<div class="dashboard-card">
					<div class="card-header">
						<img src="@/static/成本控制.png" />
						<h2>成本控制</h2>
						<div class="right-score">
							<span>{{costControl.displayScoreCount?costControl.displayScoreCount:0}}</span>分
						</div>
					</div>
					<div class="card-body">
						<div class="cost-metrics">
							<div class="metric-item">
								<div class="item-between">
									<div class="metric-name">药占比</div>
									<div class="metric-value">{{costControl.displayDrugIncomeRatio?costControl.displayDrugIncomeRatio:0}}%
									</div>
								</div>
								<div class="metric-trend">
									<div class="up-icon-green"
										:class="{'up-icon-red':getUpDownData(costControl.displayDrugIncomeProp) == '↓'}">
										{{getUpDownData(costControl.displayDrugIncomeProp)}}
									</div>环比
									{{costControl.displayDrugIncomeProp?costControl.displayDrugIncomeProp:0}}%
								</div>
							</div>
							<div class="metric-item">
								<div class="item-between">
									<div class="metric-name">耗占比</div>
									<div class="metric-value">
										{{costControl.displayRevenueIncomeRatio?costControl.displayRevenueIncomeRatio:0}}%
									</div>
								</div>
								<div class="metric-trend">
									<div class="up-icon-green"
										:class="{'up-icon-red':getUpDownData(costControl.displayRevenueIncomeProp) == '↓'}">
										{{getUpDownData(costControl.displayRevenueIncomeProp)}}
									</div>环比
									{{costControl.displayRevenueIncomeProp?costControl.displayRevenueIncomeProp:0}}%
								</div>
							</div>
							<div class="metric-item">
								<div class="item-between">
									<div class="metric-name">低值耗材费用</div>
									<div class="metric-value">{{costControl.displayLowCount?costControl.displayLowCount:0}}</div>
								</div>
								<div class="metric-trend">
									<div class="up-icon-green"
										:class="{'up-icon-red':getUpDownData(costControl.displayLowCountProp) == '↓'}">
										{{getUpDownData(costControl.displayLowCountProp)}}
									</div>环比
									{{costControl.displayLowCountProp?costControl.displayLowCountProp:0}}
								</div>
							</div>
							<div class="metric-item">
								<div class="item-between">
									<div class="metric-name">高值耗材费用</div>
									<div class="metric-value">{{costControl.displayHighCount?costControl.displayHighCount:0}}</div>
								</div>
								<div class="metric-trend">
									<div class="up-icon-green"
										:class="{'up-icon-red':getUpDownData(costControl.displayHighCountProp) == '↓'}">
										{{getUpDownData(costControl.displayHighCountProp)}}
									</div>环比
									{{costControl.displayHighCountProp?costControl.displayHighCountProp:0}}
								</div>
							</div>
						</div>
						<div class="chart-container">
							<ECharts :options="costChartOption" class="echart-chart"></ECharts>
						</div>
					</div>
				</div>

				<!-- 服务质量 -->
				<div class="dashboard-card">
					<div class="card-header">
						<img src="@/static/服务质量.png" />
						<h2>服务质量</h2>
						<div class="right-score">
							<span>{{serviceQuality.displayScoreCount?serviceQuality.displayScoreCount:0}}</span>分
						</div>
					</div>
					<div class="card-body">
						<div class="service-metrics">
							<div class="metric-item">
								<div class="item-between">
									<div class="metric-name">患者满意度</div>
									<div class="metric-value">
										{{serviceQuality.displaySatisfactionRatio?serviceQuality.displaySatisfactionRatio:0}}%
									</div>
								</div>
								<div class="metric-trend" style="height: 10px;">
									<el-progress color="#10B981"
										:percentage="Number(serviceQuality.displaySatisfactionRatio?serviceQuality.displaySatisfactionRatio:0)"
										:show-text="false" :stroke-width="10" style="width: 100%;" />
								</div>
							</div>
							<div class="metric-item">
								<div class="item-between">
									<div class="metric-name">投诉率</div>
									<div class="metric-value">
										{{serviceQuality.displayComplaintRatio?serviceQuality.displayComplaintRatio:0}}%
									</div>
								</div>
								<div class="metric-trend" style="height: 10px;">
									<el-progress color="#10B981"
										:percentage="Number(serviceQuality.displayComplaintRatio?serviceQuality.displayComplaintRatio:0)"
										:show-text="false" :stroke-width="10" style="width: 100%;" />
								</div>
							</div>
							<div class="metric-item">
								<div class="item-between">
									<div class="metric-name">表扬信数量</div>
									<div class="metric-value">
										{{serviceQuality.displayLetterOfPraiseCount?serviceQuality.displayLetterOfPraiseCount:0}}封
									</div>
								</div>
								<div class="metric-trend" style="height: 10px;">
									<el-progress color="#10B981"
										:percentage="Number(serviceQuality.displayLetterOfPraiseCount?serviceQuality.displayLetterOfPraiseCount:0)"
										:show-text="false" :stroke-width="10" style="width: 100%;" />
								</div>
							</div>
							<div class="metric-item">
								<div class="item-between">
									<div class="metric-name">医患纠纷事件</div>
									<div class="metric-value">{{serviceQuality.displayDisputeCount?serviceQuality.displayDisputeCount:0}}件
									</div>
								</div>
								<div class="metric-trend" style="height: 10px;">
									<el-progress color="#10B981"
										:percentage="Number(serviceQuality.displayDisputeCount?serviceQuality.displayDisputeCount:0)"
										:show-text="false" :stroke-width="10" style="width: 100%;" />
								</div>
							</div>
						</div>
						<div class="chart-container">
							<ECharts :options="serviceChartOption" class="echart-chart" style="margin-top: 10px;"></ECharts>
						</div>
					</div>
				</div>

				<!-- 学术科研 -->
				<div class="dashboard-card">
					<div class="card-header">
						<img src="@/static/学术科研.png" />
						<h2>学术科研</h2>
						<div class="right-score">
							<span>{{academicResearch.displayScoreCount?academicResearch.displayScoreCount:0}}</span>分
						</div>
					</div>
					<div class="card-body">
						<div class="research-metrics">
							<div class="metric-item">
								<div class="item-between">
									<div class="metric-name">带教时长</div>
									<div class="metric-value">{{academicResearch.displayLearnTime?academicResearch.displayLearnTime:0}}h
									</div>
								</div>
								<div class="metric-trend">
									<div class="up-icon-green"
										:class="{'up-icon-red':getUpDownData(academicResearch.displayLearnTimeProp) == '↓'}">
										{{getUpDownData(academicResearch.displayLearnTimeProp)}}
									</div>环比
									{{academicResearch.displayLearnTimeProp?academicResearch.displayLearnTimeProp:0}}h
								</div>
							</div>
							<div class="metric-item">
								<div class="item-between">
									<div class="metric-name">规培学员人数</div>
									<div class="metric-value">
										{{academicResearch.displayTraineeCount?academicResearch.displayTraineeCount:0}}人
									</div>
								</div>
								<div class="metric-trend">
									<div class="up-icon-green"
										:class="{'up-icon-red':getUpDownData(academicResearch.displayTraineeCountProp) == '↓'}">
										{{getUpDownData(academicResearch.displayTraineeCountProp)}}
									</div>环比
									{{academicResearch.displayTraineeCountProp?academicResearch.displayTraineeCountProp:0}}人
								</div>
							</div>
							<div class="metric-item">
								<div class="item-between">
									<div class="metric-name">核心期刊论文</div>
									<div class="metric-value">
										{{academicResearch.displayCorePaperCount?academicResearch.displayCorePaperCount:0}}篇
									</div>
								</div>
								<div class="metric-trend">
									<div class="up-icon-green"
										:class="{'up-icon-red':getUpDownData(academicResearch.displayCorePaperCountProp) == '↓'}">
										{{getUpDownData(academicResearch.displayCorePaperCountProp)}}
									</div>环比
									{{academicResearch.displayCorePaperCountProp?academicResearch.displayCorePaperCountProp:0}}篇
								</div>
							</div>
							<div class="metric-item">
								<div class="item-between">
									<div class="metric-name">市级以上课题</div>
									<div class="metric-value">
										{{academicResearch.displayTopicCount?academicResearch.displayTopicCount:0}}项
									</div>
								</div>
								<div class="metric-trend">
									<div class="up-icon-green"
										:class="{'up-icon-red':getUpDownData(academicResearch.displayTopicCountProp) == '↓'}">
										{{getUpDownData(academicResearch.displayTopicCountProp)}}
									</div>环比
									{{academicResearch.displayTopicCountProp?academicResearch.displayTopicCountProp:0}}项
								</div>
							</div>
						</div>
						<div class="chart-container">
							<ECharts :options="researchChartOption" class="echart-chart"></ECharts>
						</div>
					</div>
				</div>
			</div>
		</main>
	</div>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';
	import ECharts from '@/components/ECharts.vue'
	import {
		useRouter
	} from 'vue-router'
	import {
		useCurrentTime
	} from '@/hooks/useCurrentTime'
	const {
		currentTime
	} = useCurrentTime()

	import {
		getDisplayDeptInfo,
		getDisplayDRPersonInfo,
		getDisplayMedicalQualityInfo,
		getDisplayPRODInfo,
		getDisplaySkillInfo,
		getDisplayCostInfo,
		getDisplayServiceInfo,
		getDisplayInvestigationInfo
	} from "@/api/performance/doctor.js";

	const router = useRouter()
	const jump = () => {
		router.push('/')
	}

	// 环比
	const upDownIcon = ref('')
	// 时间类型
	const timeType = ref('Month')
	// 当前选择科室
	const currentDept = ref(0)
	// 当前选择医生
	const currentDoctor = ref(0)
	// (科室OR医师)标识code
	const displayCode = ref('')
	// 当前(科室OR医师)标识类型（1：科室; 2：医生）
	const displayType = ref('2')
	// 医疗质量object
	const medicalQuality = ref('')
	// 工作效率object
	const workEfficiency = ref('')
	// 技术难度object
	const technicalDifficult = ref('')
	// 成本控制object
	const costControl = ref('')
	// 服务质量object
	const serviceQuality = ref('')
	// 学术科研object
	const academicResearch = ref('')
	// 科室排名数据
	const departmentRankings = ref([{
		displayDeptName: '心血管内科',
		displayDRPersonInfoCount: 18,
		displayDeptScoreCount: 96.5
	}, {
		displayDeptName: '神经外科',
		displayDRPersonInfoCount: 12,
		displayDeptScoreCount: 94.2
	}, {
		displayDeptName: '骨科',
		displayDRPersonInfoCount: 15,
		displayDeptScoreCount: 92.8
	}, {
		displayDeptName: '消化内科',
		displayDRPersonInfoCount: 14,
		displayDeptScoreCount: 91.3
	}, {
		displayDeptName: '呼吸内科',
		displayDRPersonInfoCount: 16,
		displayDeptScoreCount: 89.7
	}, {
		displayDeptName: '妇产科',
		displayDRPersonInfoCount: 22,
		displayDeptScoreCount: 88.2
	}])
	// 医生绩效数据
	const doctorPerformances = ref([{
			displayDRPersonName: '张远明',
			displayDRPersonTitleName: '主任医师',
			displayDRPersonCount: 98.2
		},
		{
			displayDRPersonName: '李静怡',
			displayDRPersonTitleName: '副主任医师',
			displayDRPersonCount: 96.5
		},
		{
			displayDRPersonName: '王建国',
			displayDRPersonTitleName: '主治医师',
			displayDRPersonCount: 94.8
		},
		{
			displayDRPersonName: '陈思远',
			displayDRPersonTitleName: '主治医师',
			displayDRPersonCount: 59.3
		},
		{
			displayDRPersonName: '刘芳芳',
			displayDRPersonTitleName: '住院医师',
			displayDRPersonCount: 85.7
		},
		{
			displayDRPersonName: '赵伟佳',
			displayDRPersonTitleName: '副主任医师',
			displayDRPersonCount: 93.5
		}
	])
	// 医疗质量图表
	const qualityChartOption = ref({
		title: {
			text: '',
			left: 'center',
			textStyle: {
				color: '#fff'
			}
		},
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'shadow'
			}
		},
		grid: {
			left: '3%',
			right: '4%',
			bottom: '0%',
			containLabel: true,
			height: '85%'
		},
		xAxis: {
			type: 'value',
			max: 100,
			axisLabel: {
				color: '#94A3B8'
			},
			splitLine: {
				show: false
			},
		},
		yAxis: {
			type: 'category',
			data: ['诊断符合率', '手术并发症率', '病历合格率', '低风险死亡率'],
			axisLabel: {
				color: '#94A3B8'
			}
		},
		series: [{
			data: [98, 98, 96.8, 99],
			type: 'bar',
			itemStyle: {
				color: function(params) {
					const colors = ['#10b981', '#10b981', '#10b981', '#10b981'];
					return colors[params.dataIndex];
				}
			},
			label: {
				show: true,
				position: 'right',
				color: '#fff'
			}
		}]
	})

	// 工作效率图表
	const efficiencyChartOption = ref({
		title: {
			text: '',
			left: 'center',
			textStyle: {
				color: '#fff'
			}
		},
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'shadow'
			}
		},
		grid: {
			left: '3%',
			right: '4%',
			bottom: '0%',
			containLabel: true,
			height: '85%'
		},
		xAxis: {
			type: 'category',
			data: ['门诊量', '住院量', '手术台数'],
			axisLabel: {
				color: '#94A3B8',
				// rotate: 30
			}
		},
		yAxis: {
			type: 'value',
			name: '数量',
			axisLabel: {
				color: '#94A3B8'
			},
			splitLine: {
				show: false
			},
		},
		series: [{
			data: [12856, 2345, 1287],
			type: 'bar',
			itemStyle: {
				color: function(params) {
					const colors = ['#6983f6', '#7f58db', '#ec9d00'];
					return colors[params.dataIndex];
				}
			},
			label: {
				show: true,
				position: 'top',
				color: '#fff'
			}
		}]
	})
	// const efficiencyChartOption = ref({
	// 	title: {
	// 		text: '',
	// 		left: 'center',
	// 		textStyle: {
	// 			color: '#fff'
	// 		}
	// 	},
	// 	tooltip: {
	// 		trigger: 'axis'
	// 	},
	// 	legend: {
	// 		data: ['门诊量', '住院量', '手术台数'],
	// 		textStyle: {
	// 			color: '#94A3B8'
	// 		},
	// 		top: 10
	// 	},
	// 	grid: {
	// 		left: '3%',
	// 		right: '4%',
	// 		bottom: '0%',
	// 		containLabel: true,
	// 		height: '85%'
	// 	},
	// 	xAxis: {
	// 		type: 'category',
	// 		data: ['7月', '8月', '9月', '10月', '11月', '12月'],
	// 		axisLabel: {
	// 			color: '#94A3B8'
	// 		}
	// 	},
	// 	yAxis: {
	// 		type: 'value',
	// 		axisLabel: {
	// 			color: '#94A3B8'
	// 		},
	// 		splitLine: {
	// 			show: false
	// 		},
	// 	},
	// 	series: [{
	// 			name: '门诊量',
	// 			data: [10000, 10500, 11000, 11500, 12000, 12856],
	// 			type: 'line',
	// 			symbol: 'circle', // 指定为圆形节点
	// 			symbolSize: 8, // 节点大小
	// 			lineStyle: {
	// 				color: '#6983f6'
	// 			},
	// 			// 节点样式（空心白色圆点）
	// 			itemStyle: {
	// 				color: '#fff', // 内部透明
	// 				borderColor: '#6983f6', // 边框颜色（与线条同色）
	// 				borderWidth: 2, // 边框宽度
	// 			},
	// 		},
	// 		{
	// 			name: '住院量',
	// 			data: [1800, 1900, 2000, 2100, 2200, 2345],
	// 			type: 'line',
	// 			symbol: 'circle',
	// 			symbolSize: 8,
	// 			lineStyle: {
	// 				color: '#7f58db'
	// 			},
	// 			itemStyle: {
	// 				color: '#fff',
	// 				borderColor: '#7f58db',
	// 				borderWidth: 2
	// 			},
	// 			emphasis: {
	// 				itemStyle: {
	// 					color: '#fff',
	// 					borderColor: '#7f58db'
	// 				},
	// 				symbolSize: 10
	// 			}
	// 		},
	// 		{
	// 			name: '手术台数',
	// 			data: [1000, 1050, 1100, 1150, 1200, 1287],
	// 			type: 'line',
	// 			symbol: 'circle',
	// 			symbolSize: 8,
	// 			lineStyle: {
	// 				color: '#ec9d00'
	// 			},
	// 			itemStyle: {
	// 				color: '#fff',
	// 				borderColor: '#ec9d00',
	// 				borderWidth: 2
	// 			},
	// 			emphasis: {
	// 				itemStyle: {
	// 					color: '#fff',
	// 					borderColor: '#ec9d00'
	// 				},
	// 				symbolSize: 10
	// 			}
	// 		}
	// 	]
	// })

	// 技术难度图表
	const difficultyChartOption = ref({
		title: {
			text: '',
			left: 'center',
			textStyle: {
				color: '#fff'
			}
		},
		tooltip: {
			trigger: 'item'
		},
		legend: {
			orient: 'vertical',
			left: 'right',
			textStyle: {
				color: '#94A3B8'
			},
			data: ['四级手术', '三级手术', '微创手术', '常规手术']
		},
		series: [{
			name: '手术类型',
			type: 'pie',
			radius: ['40%', '70%'],
			avoidLabelOverlap: false,
			itemStyle: {
				borderRadius: 10,
				borderColor: '#1E293B',
				borderWidth: 2
			},
			label: {
				show: true,
				formatter: '{b}: {c}%'
			},
			labelLine: {
				show: true
			},
			emphasis: {
				label: {
					show: true,
					fontSize: 16,
					fontWeight: 'bold',
					color: '#fff'
				}
			},
			data: [{
					value: 22.65,
					name: '四级手术',
					itemStyle: {
						color: '#6983f6'
					}
				},
				{
					value: 16.6,
					name: '三级手术',
					itemStyle: {
						color: '#7f58db'
					}
				},
				{
					value: 32.9,
					name: '微创手术',
					itemStyle: {
						color: '#41b980'
					}
				}, {
					value: 27.85,
					name: '常规手术',
					itemStyle: {
						color: '#ec9d00'
					}
				}
			]
		}]
	})

	// 成本控制图表
	const costChartOption = ref({
		title: {
			text: '',
			left: 'center',
			textStyle: {
				color: '#fff'
			}
		},
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'shadow'
			}
		},
		grid: {
			left: '3%',
			right: '4%',
			bottom: '0%',
			containLabel: true,
			height: '85%'
		},
		xAxis: {
			type: 'category',
			data: ['药占比', '耗占比', '低倍率病历数', '高倍率病历数'],
			axisLabel: {
				color: '#94A3B8',
				rotate: 30
			},
		},
		yAxis: {
			type: 'value',
			axisLabel: {
				color: '#94A3B8'
			},
			splitLine: {
				show: false
			},
		},
		series: [{
			data: [28.5, 15.2, 128, 105],
			type: 'bar',
			itemStyle: {
				color: function(params) {
					const colors = ['#10b981', '#10b981', '#5e81f4', '#5e81f4'];
					return colors[params.dataIndex];
				}
			},
			label: {
				show: true,
				position: 'top',
				color: '#fff',
				formatter: function(params) {
					return params.dataIndex < 2 ? params.value + '%' : params.value;
				}
			}
		}]
	})

	// 服务质量图表
	const serviceChartOption = ref({
		title: {
			text: '',
			left: 'center',
			textStyle: {
				color: '#fff'
			}
		},
		tooltip: {
			trigger: 'item'
		},
		grid: {
			left: '3%',
			right: '4%',
			top: '10%',
			bottom: '20%',
			containLabel: true,
			height: '85%'
		},
		radar: {
			radius: '70%',
			center: ['50%', '50%'],
			indicator: [{
					name: '患者满意度',
					max: 100,

				},
				{
					name: '表扬信数量',
					min: 0
				},
				{
					name: '投诉率',
					max: 100
				},
				{
					name: '医患纠纷事件',
					min: 0
				},
			],
			splitArea: {
				areaStyle: {
					color: ['rgba(255,255,255,0.1)'],
				},
				show: false
			},
			axisLine: {
				lineStyle: {
					color: '#94A3B8'
				},
				show: false
			},
			splitLine: {
				lineStyle: {
					color: 'rgba(255,255,255,0.1)'
				},
				show: false
			},
			name: {
				textStyle: {
					color: '#94A3B8'
				}
			}
		},
		series: [{
			name: '服务质量',
			type: 'radar',
			symbol: 'circle',
			symbolSize: 6,
			lineStyle: {
				width: 2,
				color: '#10B981'
			},
			areaStyle: {
				color: 'rgba(16, 185, 129, 0.2)'
			},
			itemStyle: {
				color: '#10B981'
			},
			data: [{
				value: [96.8, 0.8, 12, 8]
			}]
		}]
	})

	// 学术科研图表
	const researchChartOption = ref({
		title: {
			text: '',
			left: 'center',
			textStyle: {
				color: '#fff'
			}
		},
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'shadow'
			}
		},
		grid: {
			left: '3%',
			right: '4%',
			bottom: '0%',
			containLabel: true,
			height: '85%'
		},
		xAxis: {
			type: 'category',
			data: ['规培合格人数', '核心论文', '市级课题'],
			axisLabel: {
				color: '#94A3B8',
				rotate: 30
			}
		},
		yAxis: {
			type: 'value',
			name: '数量',
			axisLabel: {
				color: '#94A3B8'
			},
			splitLine: {
				show: false
			},
		},
		series: [{
			data: [86, 48, 16],
			type: 'bar',
			itemStyle: {
				color: function(params) {
					const colors = ['#5e81f4', '#f59e0b', '#10b981'];
					return colors[params.dataIndex];
				}
			},
			label: {
				show: true,
				position: 'top',
				color: '#fff'
			}
		}]
	})

	onMounted(() => {
		getDeptData()
	})

	// 获取排名颜色
	const getRankColor = (index) => {
		if (index <= 2) {
			const colors = ['#6983f6', '#7f58db', '#ec9d00'];
			return colors[index % colors.length];
		}
	}

	// 获取环比 ↑ || ↓
	const getUpDownData = (data) => {
		if (data > 0) {
			return '↑'
		} else if (data < 0) {
			return '↓'
		} else {
			return ''
		}
	}

	// 切换本月/本日数据
	const changeTimeType = () => {
		if (timeType.value == 'Month') {
			timeType.value = 'Day'
		} else {
			timeType.value = 'Month'
		}
		medicalQualityData()
		workEfficiencyData()
		technicalDifficultyData()
		costControlData()
		serviceQualityData()
		academicResearchData()
	}

	// 切换科室
	const changeDept = (item, index) => {
		currentDept.value = index
		displayCode.value = item.displayDeptCode
		currentDoctor.value = 0
		getDoctorData()
	}

	// 切换医生
	const changeDoctor = (item, index) => {
		currentDoctor.value = index
		displayCode.value = item.displayDRPersonCode
		displayType.value = '2'
		medicalQualityData()
		workEfficiencyData()
		technicalDifficultyData()
		costControlData()
		serviceQualityData()
		academicResearchData()
	}

	// 获取科室综合排名
	const getDeptData = () => {
		getDisplayDeptInfo(timeType.value).then(resp => {
			departmentRankings.value = resp.data.data.displayDeptInfoDtos
			if (departmentRankings.value.length > 0) {
				displayCode.value = departmentRankings.value[0].displayDeptCode
				getDoctorData()
			}
		}).catch((err) => {
			console.log(err)
		})
	}

	// 获取医生绩效明细
	const getDoctorData = () => {
		getDisplayDRPersonInfo(timeType.value, displayCode.value).then(resp => {
			doctorPerformances.value = resp.data.data.displayDRPersonInfos
			displayCode.value = doctorPerformances.value[0].displayDRPersonCode
			medicalQualityData()
			workEfficiencyData()
			technicalDifficultyData()
			costControlData()
			serviceQualityData()
			academicResearchData()
		}).catch((err) => {
			console.log(err)
		})
	}

	// 获取医疗质量
	const medicalQualityData = () => {
		getDisplayMedicalQualityInfo(timeType.value, displayCode.value, displayType.value).then(resp => {
			medicalQuality.value = resp.data.data
			qualityChartOption.value.series[0].data[0] = resp.data.data.displayMQInfoDtoList[0].displayDiagnoseInfoRatio
			qualityChartOption.value.series[0].data[1] = resp.data.data.displayMQInfoDtoList[0].displayRelapseInfoRatio
			qualityChartOption.value.series[0].data[2] = resp.data.data.displayMQInfoDtoList[0].displayMRInfoRatio
			qualityChartOption.value.series[0].data[3] = resp.data.data.displayMQInfoDtoList[0].displayLowInfoRatio
		}).catch((err) => {
			console.log(err)
		})
	}

	// 获取工作效率
	const workEfficiencyData = () => {
		getDisplayPRODInfo(timeType.value, displayCode.value, displayType.value).then(resp => {
			workEfficiency.value = resp.data.data
			efficiencyChartOption.value.series[0].data[0] = resp.data.data.displayPRODLists[0].outpatientCount
			efficiencyChartOption.value.series[0].data[1] = resp.data.data.displayPRODLists[0].ipdCount
			efficiencyChartOption.value.series[0].data[2] = resp.data.data.displayPRODLists[0].surgeryCount
		}).catch((err) => {
			console.log(err)
		})
	}

	// 获取技术难度
	const technicalDifficultyData = () => {
		getDisplaySkillInfo(timeType.value, displayCode.value, displayType.value).then(resp => {
			technicalDifficult.value = resp.data.data
			difficultyChartOption.value.series[0].data[0].value = resp.data.data.displaySkillInfoDto.displayPDUL4SCount
			difficultyChartOption.value.series[0].data[1].value = resp.data.data.displaySkillInfoDto.displayPDUL3SCount
			difficultyChartOption.value.series[0].data[2].value = resp.data.data.displaySkillInfoDto.displayMISDSUCount
			difficultyChartOption.value.series[0].data[3].value = resp.data.data.displaySkillInfoDto.displayRegularCount
		}).catch((err) => {
			console.log(err)
		})
	}

	// 获取成本控制
	const costControlData = () => {
		getDisplayCostInfo(timeType.value, displayCode.value, displayType.value).then(resp => {
			costControl.value = resp.data.data
			costChartOption.value.series[0].data[0] = resp.data.data.displaySourcingList[0].displayDrugIncomeRatio
			costChartOption.value.series[0].data[1] = resp.data.data.displaySourcingList[0].displayRevenueIncomeRatio
			costChartOption.value.series[0].data[2] = resp.data.data.displaySourcingList[0].displayLowCount
			costChartOption.value.series[0].data[3] = resp.data.data.displaySourcingList[0].displayHighCount
		}).catch((err) => {
			console.log(err)
		})
	}

	// 获取服务质量
	const serviceQualityData = () => {
		getDisplayServiceInfo(timeType.value, displayCode.value, displayType.value).then(resp => {
			serviceQuality.value = resp.data.data
			serviceChartOption.value.series[0].data[0].value[0] = resp.data.data.displaySatisfactionRatio
			serviceChartOption.value.series[0].data[0].value[1] = resp.data.data.displayLetterOfPraiseCount
			serviceChartOption.value.series[0].data[0].value[2] = resp.data.data.displayComplaintRatio
			serviceChartOption.value.series[0].data[0].value[3] = resp.data.data.displayDisputeCount
		}).catch((err) => {
			console.log(err)
		})
	}

	// 获取学术科研
	const academicResearchData = () => {
		getDisplayInvestigationInfo(timeType.value, displayCode.value, displayType.value).then(resp => {
			academicResearch.value = resp.data.data
			researchChartOption.value.series[0].data[0] = resp.data.data.displayInvestigationInfoList[0]
				.displayTraineeCount
			researchChartOption.value.series[0].data[1] = resp.data.data.displayInvestigationInfoList[0]
				.displayCorePaperCount
			researchChartOption.value.series[0].data[2] = resp.data.data.displayInvestigationInfoList[0]
				.displayTopicCount
		}).catch((err) => {
			console.log(err)
		})
	}
</script>

<style lang="less" scoped>
	.dashboard-container {
		width: 100%;
		height: 100%;
		background-color: #0F172AFF;
		font-family: 'Microsoft YaHei', sans-serif;
		color: var(--text-color);
		padding: 10px 20px;
		box-sizing: border-box;
	}

	.dashboard-header {
		padding: 10px 0;

		.logo {
			width: 60px;
			height: 60px;
			border-radius: 50%;
		}

		.title-box {
			margin-left: 20px;

			.title {
				font-size: 21px;
				font-weight: bolder;
			}

			.hospital-name {
				font-size: 14px;
				padding-top: 5px;
				color: #818999;
			}
		}

		.right-box {
			.time-box {
				margin-right: 20px;

				.current-time-label {
					font-size: 12px;
					color: #818999;
				}

				.current-time-value {
					font-size: 18px;
					padding-top: 5px;
					font-weight: bolder;
				}

			}

			.avatar {
				width: 50px;
				height: 50px;
				border-radius: 50%;
				margin: 0 auto;
				display: block;
			}

			.user-name {
				font-size: 12px;
				padding-top: 5px;
				color: #818999;
			}
		}
	}

	.dashboard-main {
		height: calc(100vh - 120px);
		margin-top: 10px;
		display: flex;
		flex-direction: column;
		gap: 20px;
	}

	.card-row {
		display: flex;
		gap: 20px;
	}

	.dashboard-card {
		flex: 1;
		background-color: #1E293B;
		border-radius: 8px;
		padding: 16px 30px;
		min-width: 0;
	}

	.card-header {
		display: flex;
		align-items: center;
		margin-bottom: 16px;

		img {
			width: 30px;
			margin-right: 10px;
		}
	}

	.card-header h2 {
		font-size: 20px;
		margin: 0;
		display: flex;
		align-items: center;
		gap: 8px;
	}

	.right-score {
		margin-left: auto;
		font-size: 18px;
		font-weight: 550;

		span {
			font-size: 16px;
			margin-right: 1px;
		}
	}

	.card-filter {
		display: flex;
		align-items: center;
		margin-left: auto;
		gap: 4px;
		color: #94A3B8;
		font-size: 16px;
		cursor: pointer;
	}

	.card-body {
		display: flex;
		flex-direction: column;
		gap: 16px;
	}

	/* 科室排名样式 */
	.ranking-list {
		height: 380px;
		list-style: none;
		padding: 0;
		margin: 0;
		display: flex;
		flex-direction: column;
		gap: 10px 12px;
		overflow-y: auto;
	}

	.ranking-item {
		display: flex;
		align-items: center;
		gap: 12px;
		padding: 10px 16px;
		border-radius: 10px;
		cursor: pointer;

		.rank-number {
			width: 35px;
			height: 35px;
			border-radius: 50%;
			color: white;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 18px;
			font-weight: bold;
			background: #6c7280;
		}
	}

	.ranking-item-actvive {
		background: #354156;
	}

	.rank-info {
		flex: 1;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.dept-name {
		font-size: 18px;
	}

	.doctor-count {
		font-size: 14px;
		color: #94A3B8;
		margin-left: 8px;
	}

	.dept-score {
		font-size: 16px;
		font-weight: bold;
		color: #fff;
	}

	.dept-score-green {
		color: #40b27d;
	}

	.dept-score-red {
		color: #c03c41;
	}

	/* 指标项样式 */
	.quality-metrics,
	.efficiency-metrics,
	.difficulty-metrics,
	.cost-metrics,
	.service-metrics,
	.research-metrics {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 15px;
		margin-bottom: 8px;
	}

	.metric-item {
		background-color: #354156;
		border-radius: 10px;
		padding: 12px;

		.item-between {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 10px;
		}
	}

	.metric-name {
		font-size: 16px;
		color: #94A3B8;
	}

	.metric-value {
		font-size: 18px;
		font-weight: bold;
		color: #10B981;
	}

	.metric-trend {
		font-size: 12px;
		display: flex;
		align-items: center;
		gap: 4px;
		color: #94A3B8;
	}

	.up-icon-green {
		color: #10B981;
	}

	.up-icon-red {
		color: #c03c41;
	}

	/* 图表容器样式 */
	.chart-container {
		width: 100%;
		min-height: 200px;
		flex: 1;
		position: relative;
	}

	.echart-chart {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}


	:deep(.el-progress-bar__outer) {
		background-color: transparent;
	}
</style>